<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas-demos</title>

    <style>
        canvas {
            margin: 0 auto;
            border: 2px solid #aaa;
            display: block;
        }
    </style>
</head>

<body>
<canvas id="cont" width="500px" height="500px">浏览器不支持</canvas>
<!--只能使用原生的js,如果让canvas左右居中使用display:block-->
<script>
    // 固定start获取画布
    const canvas = document.querySelector('#cont')
    // 获取画布上下文
    const ctx = canvas.getContext('2d')

    // 固定end

    const w = h = 500
    // 画文字
    drawText("心", w / 2, h / 2)
    // 获取像素点
    const copy = ctx.getImageData(0, 0, w, h);
    // 清除画布
    ctx.clearRect(0, 0, w, h)
    // 设置间隔
    const leap = 1

    // 筛选有效像素点
    for (let y = 0; y < h; y += leap) {
        for (let x = 0; x < w; x += leap) {
            const index = x + y * w // 像素索引
            const a = copy.data[index * 4 + 3]
            if (a > 128) {
                // 画圆
                drawCircle(x, y, 1, '#f00')
            }
        }
    }

    /**
     * 画实心小球
     * @param x
     * @param y
     * @param r
     * @param color
     */
    function drawCircle(x, y, r, color = '#000') {
        ctx.beginPath()
        ctx.arc(x, y, r, 0, Math.PI * 2, true)
        ctx.fillStyle = color
        ctx.fill()
    }

    /**
     * 画文字
     * @param text
     * @param x
     * @param y
     */
    function drawText(text, x, y) {
        ctx.font = '150px 微软雅黑'
        ctx.fillStyle = '#000'
        ctx.textAlign = 'center'
        ctx.textBaseline = 'middle'
        ctx.fillText(text, x, y, w)
    }
</script>
</body>
</html>
